<template>
  <div class="music">
    <h3>Music</h3>
    <div>
      <router-link to="/Home/Music/MusicDetail/1/20">周杰伦</router-link>
      <router-link to="/Home/Music/MusicDetail/2/25">林俊杰</router-link>
      <router-link to="/Home/Music/MusicDetail/3/50">陈奕迅</router-link>
    </div>
    <button @click="$router.push({
      name:'MusicDetail',
      params:{
        id:1,
        age:20,
      }
    })">周杰伦</button>
    <button @click="$router.push({
      name:'MusicDetail',
      params:{
        id:2,
        age:20,
      }
    })">林俊杰</button>
    <button @click="$router.push({
      name:'MusicDetail',
      params:{
        id:3,
        age:20,
      }
    })">陈奕迅</button>
  </div>
</template>

<script>
export default {
  name: "Music",
  mounted() {
    console.log("Music mounted");
  },
  beforeDestroy() {
    console.log("Music beforeDestroy");
  },
};
</script>

<style scoped>
.music {
  background-color: orange;
}
</style>
